<template>
<div>
    <van-search v-model="keyword" placeholder="请输入搜索关键词" @search="onSearch(keyword)" />

    <div v-if="keyword.length == 0">
        <div class="hot">定位/正在访问</div>
        <div>
            <van-cell>
                <button @click="handleClick(location)">{{location}}</button>
            </van-cell>

<!--             <van-cell v-for="item of visitedCities" :key="item.id">
                <button @click="handleClick(item)">{{item}}</button>
            </van-cell> -->
        </div>
        
        <div class="hot">热门城市</div>
        <div>
            <van-cell v-for="item of result.hotCities" :key="item.id">
                <button @click="handleClick(item.name)">{{item.name}}</button>
            </van-cell>
        </div>

        <div class="hot">所有城市</div>
        <van-index-bar :index-list="lists">
            <div v-for="(cities,index) of result.cities" :key="index">
                <van-index-anchor :index="index" />
                <van-cell v-for="city of cities" :key="city.id">
                    <button @click="handleClick(city.name)">{{city.name}}</button>
                </van-cell>
            </div>
        </van-index-bar>
    </div>

    <div v-if="keyword.length > 0">
        <button v-for="item of searchCities" :key="item.id" @click="handleClick(item.name)">{{item.name}}</button>
        <div v-if="searchCities.length == 0">
            无结果
        </div>
    </div>
</div>
</template>
<script>
import axios from 'axios';
    export default {
        data(){
            return{
                keyword:"",
                lists:"",
                result:"",
                searchCities:"",
                // visitedCities:'',
                location:""
            }
        },
        mounted() {
            let data = {key: "V7DBZ-ZKGWR-QU6W7-W4YAM-A3DDZ-PBFTL"};
                let cityurl = "https://apis.map.qq.com/ws/location/v1/ip";
                data.output = "jsonp";
                this.$jsonp(cityurl, data).then(res => {
                    this.location = res.result.ad_info.city
                    localStorage.setItem("locationCity",this.location)
                })
            let url = "http://47.108.197.28:8000/city";
            axios.get(url).then(res=>{
                // console.log(res.data.data.cities)
                this.result = res.data.data;
                this.lists = Object.keys(this.result.cities)
            })
            var location = localStorage.getItem('locationCity')
            // console.log(location)
            this.location = location
            if(location){
                this.visitedCities = location
            }else{
                localStorage.setItem('location',[])
            }
        },
        methods:{
            onSearch(keyword){
                // console.log(keyword);
                var city = this.result.cities;
                var searchCities = [];
                for(let key in city){
                    city[key].forEach(item=>{
                        if(item.name.includes(keyword) || item.spell.includes(keyword)){
                            searchCities.push(item)
                        }
                    })
                }
                this.searchCities=searchCities;
            },
            handleClick(city){
                // var res = localStorage.getItem('location');
                // console.log(val);
                // if(!res.includes(val)){
                //     res.unshift(val)
                // }
                // localStorage.setItem('res',res.slice(0,3))
                this.$store.dispatch("handleClick",city)
                this.$router.push('/films')
            },
        }
    }
</script>
<style scoped>
</style>